<template>
  <Panel>
    <template #title>账号列表</template>
    <template #content>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="account" label="姓名" width="200">
          <template v-slot="{ row }">
            <el-input
              size="mini"
              v-if="row.flag"
              v-model="row.account"
              :value="row.account"
            ></el-input>
            <span v-else>{{ row.account }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户组" width="200">
          <template v-slot="{ row }">
            <el-select v-if="row.flag" v-model="row.userGroup" size="mini">
              <el-option label="超级管理员" value="超级管理员"> </el-option>
              <el-option label="普通管理员" value="普通管理员"> </el-option>
            </el-select>
            <span v-else>{{ row.userGroup }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200">
          <template v-slot="{ row }">{{ row.ctime | dataForat }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ $index, row }">
            <el-button
              v-waves
              size="mini"
              @click="handleEdit($index, row)"
              :disabled="row.flag ? !flag : flag"
              >{{ row.flag ? '完成' : '编辑' }}</el-button
            >
            <el-button v-waves size="mini" type="danger" @click="userdel(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <Paging :pageData="paging" @pagingIncident="userlist" />
      <!-- 按钮 -->
      <div style="margin-top: 20px">
        <el-button v-waves type="danger" @click="batchdel">批量删除</el-button>
        <el-button v-waves type="primary" @click="toggleSelection()"
          >取消选择</el-button
        >
      </div>
    </template>
  </Panel>
</template>

<script>
import { userList, userDel, alterUser, batchDel } from '@/api/user'
import { okBox, error } from '@/utils/hint'
import local from '@/utils/local'
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      tableData: [],
      /* 其他按钮是否禁用 */
      flag: false,
      multipleSelection: [],
      paging: {
        currentPage: 1,
        pageSize: 4,
        total: 0
      }
    }
  },
  created() {
    this.userlist()
  },
  mounted() {
    // eslint-disable-next-line no-new
    new Sortable(document.querySelector('tbody'), {
      animation: 150,
      ghostClass: 'blue-background-class'
    })
  },
  methods: {
    /* 账号列表 */
    async userlist() {
      const { data, total } = await userList(this.paging)
      data.map(item => (item.flag = false))
      this.tableData = data
      this.paging.total = total
    },
    userdel(row) {
      /* 不允许删除当前登入的用户 */
      if (JSON.parse(local.get('accountInfo')).id === row.id) {
        error('不允许删除当前登入用户')
        return
      }
      okBox('删除该文件').then(async () => {
        const { code } = await userDel({ id: row.id })
        if (code === 0) {
          this.userlist()
        }
      })
    },
    /* 取消选择 */
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    /* 批量删除 */
    batchdel() {
      if (this.multipleSelection.length === 0) return
      /* 不允许删除当前登入的用户 */
      if (
        this.multipleSelection.some(
          item => item.id === JSON.parse(local.get('accountInfo')).id
        )
      ) {
        error('不允许删除当前已登入用户')
        return
      }
      const ids = JSON.stringify(this.multipleSelection.map(item => item.id))
      okBox('删除所选账户').then(async () => {
        await batchDel({ ids })
        this.userlist()
      })
    },
    /* 改变选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 编辑 */
    handleEdit(index, row) {
      if (row.flag) {
        alterUser({
          id: row.id,
          account: row.account,
          userGroup: row.userGroup
        })
      }
      row.flag = !row.flag
      this.flag = row.flag
    }
  }
}
</script>

<style lang="less" scoped></style>
